// 公共js代码
(function () {
  var register1 = document.querySelector(".head_right_fr_register"); //注册按钮
  var logon_register = document.querySelector(".logon_register"); //遮挡层
  var register2 = document.querySelector(".register"); //注册层
  var close = document.querySelectorAll(".close"); //关闭按钮
  var forget = document.querySelectorAll(".forget_fr"); //去登录、注册
  var login1 = document.querySelector(".head_right_fr_login"); //登录按钮
  var head_right_fr = document.querySelector(".head_right_fr"); //登录父盒子
  var user = document.querySelector(".user"); //用户头像
  var logon2 = document.querySelector(".logon"); //登录层
  var logonIpt = document.querySelectorAll(".logon input"); //登录input
  var logonEm = document.querySelectorAll(".logon em"); //登录em
  var inputs = document.querySelectorAll(".register input"); //注册input
  var em = document.querySelectorAll(".register em"); //注册em错误提示信息
  var verification = document.querySelector(".verification").children; //注册input
  //注册
  register1.onclick = function () {
    logon_register.style.display = "block";
    register2.style.display = "block";
    logon2.style.display = "none";
  };
  var reg = [/^1[3-9][0-9]{9}$/, /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/];
  var errorMessage = [
    "请输入正确的手机号",
    "长度至少为8,至少含有一个字母和一个数字",
    "密码不一致!",
    "验证码有误!",
  ];
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].index = i;
    if (i < 4) {
      inputs[i].onblur = function () {
        if (this.index == 0) {
          //验证手机号
          if (this.value == "") {
            em[0].innerHTML = "手机号不能为空";
          } else if (reg[0].test(this.value)) {
            em[this.index].innerHTML = "";
          } else {
            em[this.index].innerHTML = errorMessage[this.index];
          }
        }
        if (this.index == 1) {
          //验证密码
          if (this.value == "") {
            em[1].innerHTML = "密码不能为空";
          } else if (reg[1].test(this.value)) {
            em[this.index].innerHTML = "";
          } else {
            em[this.index].innerHTML = errorMessage[this.index];
          }
        }
        if (this.index == 2) {
          //验证密码
          if (this.value == inputs[1].value) {
            em[this.index].innerHTML = "";
          } else {
            em[this.index].innerHTML = errorMessage[this.index];
          }
        }
        if (this.index == 3) {
          //验证密码
          if (this.value == "") {
            em[3].innerHTML = "验证码不能为空";
          } else if (this.value == verification[1].innerHTML) {
            em[this.index].innerHTML = "";
          } else {
            em[this.index].innerHTML = errorMessage[this.index];
          }
        }
      };
    }
  }
  inputs[4].onclick = function () {
    //点击注册按钮
    var isUser = true; //控制能否提交注册
    for (var i = 0; i < inputs.length - 2; i++) {
      if (inputs[i].value == "") {
        em[i].innerHTML = errorMessage[i];
      }
      // if (em[i].innerHTML) {
      //   return false;
      // }
    }
    for (var i = 0; i < em.length; i++) {
      if (em[i].innerHTML) {
        isUser = false;
      }
    }
    if (!inputs[5].checked && isUser) {
      alert("请勾选协议!");
      isUser = false;
    }
    if (isUser) {
      var USER = JSON.parse(localStorage.getItem("USER")); //获取本地用户
      var userName = inputs[0].value;
      var passWord = inputs[1].value;
      if (USER == null) {
        USER = [];
      }
      for (var i = 0; i < USER.length; i++) {
        //判断用户是否存在
        if (inputs[0].value == USER[i].userName) {
          alert("该用户已存在!");
          isUser = false;
          return false;
        }
      }
      if (isUser) {
        USER.push({
          userName: userName,
          passWord: passWord,
        });
        localStorage.setItem("USER", JSON.stringify(USER));
        logon_register.style.display = "block";
        logon2.style.display = "block";
        register2.style.display = "none";
      }
    }
  };
  //去注册
  forget[0].onclick = function () {
    logon_register.style.display = "block";
    register2.style.display = "block";
    logon2.style.display = "none";
  };
  //去登录
  forget[1].onclick = function () {
    logon_register.style.display = "block";
    logon2.style.display = "block";
    register2.style.display = "none";
  };
  //登录
  login1.onclick = function () {
    logon_register.style.display = "block";
    logon2.style.display = "block";
    register2.style.display = "none";
  };

  for (var i = 0; i < logonIpt.length - 1; i++) {
    //验证登录账号密码不为空
    logonIpt[i].index = i;
    logonIpt[i].onblur = function () {
      if (this.index == 0) {
        if (this.value == "") {
          logonEm[0].innerText = "账号不能为空";
        } else if (reg[0].test(this.value)) {
          logonEm[0].innerText = "";
        } else {
          logonEm[this.index].innerText = errorMessage[this.index];
        }
      }
      if (this.index == 1) {
        if (this.value == "") {
          logonEm[1].innerHTML = "密码不能为空";
        } else if (reg[1].test(this.value)) {
          logonEm[1].innerHTML = "";
        } else {
          logonEm[this.index].innerHTML = errorMessage[this.index];
        }
      }
    };
  }
  logonIpt[2].onclick = function () {
    //点击登录按钮
    var errorMessage = ["账号不能为空", "密码不能为空"];
    var login = true; //是否可以登录跳转
    for (var i = 0; i < logonIpt.length - 1; i++) {
      if (logonIpt[i].value == "") {
        logonEm[i].innerHTML = errorMessage[i];
      }
    }
    for (var i = 0; i < logonEm.length; i++) {
      if (logonEm[i].innerHTML) {
        login = false;
      }
    }
    if (login) {
      var USER = JSON.parse(localStorage.getItem("USER"));
      for (var i = 0; i < USER.length; i++) {
        var name = logonIpt[0].value;
        var val = logonIpt[1].value;
        if (name == USER[i]["userName"] && val == USER[i]["passWord"]) {
          head_right_fr.style.display = "none";
          user.style.display = "block";
          logon_register.style.display = "none";
          localStorage.setItem("isLogin", "true"); //记录登录状态
          login = false;
          alert("登录成功");
          return false;
        }
      }
      if (login) alert("请输入正确的账号或密码!");
      return false;
    }
  };
  if (localStorage.getItem("isLogin") == "true") {
    //判断登录状态
    user.style.display = "block";
    head_right_fr.style.display = "none";
  }
  //点击用户头像
  var user_menu = document.querySelector(".user_menu");
  var isClick = false;
  user.onclick = function (e) {
    e.cancelBubble ? (e.cancelBubble = true) : e.stopPropagation();
    isClick = !isClick;
    isClick
      ? (user_menu.style.display = "block")
      : (user_menu.style.display = "none");
  };
  document.onclick = function () {
    user_menu.style.display = "none";
    isClick = false;
  };
  //退出登录
  var userP = document.querySelectorAll(".user_menu p");
  userP[userP.length - 1].onclick = function () {
    localStorage.setItem("isLogin", "false");
    user.style.display = "none";
    head_right_fr.style.display = "block";
  };
  //右上角关闭按钮
  close[0].onclick = function () {
    logon_register.style.display = "none";
  };
  close[1].onclick = function () {
    logon_register.style.display = "none";
  };
  //头部导航菜单样式
  var headLis = document.querySelectorAll(".head .head_center li a");
  for (var i = 0; i < headLis.length; i++) {
    headLis[i].onclick = function () {
      sessionStorage.setItem("hd_text", "" + this.innerText + ""); //保存导航信息
    };
  }
  var text = sessionStorage.getItem("hd_text");
  for (var i = 0; i < headLis.length; i++) {
    if (headLis[i].innerText == text) {
      headLis[i].className = "actives";
    }
  }
  //生成随机验证码
  inputs[3].nextElementSibling.onclick = random;
  function random() {
    var str = "0123456789qwertyuiopasdfghjklzxcvbnm";
    var str1 = "";
    for (var i = 0; i < 4; i++) {
      var index = Math.floor(Math.random() * str.length);
      str1 += str[index];
    }
    inputs[3].nextElementSibling.innerHTML = str1;
  }
  random();
})();
